<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            width: 50%;
            height: 100vh;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        body>div {
            /*粉#FFCCCC 紫#CCCCFF 绿#CCFFCC */
            margin: 2px;
            color: #000;
            background-color: #FFCCCC;
        }

        hr {
            background-color: red;
            height: 1px;
            border: 0;
        }

        .div1 {
            line-height: 30px;
        }
    </style>
</head>

<body>
    <div class="div1">
        line-height: 30px;
        设置行高，文字默认在一行里垂直居中。可直接设置大小，也可设置百分数，以字体大小为100%。
        PS:当只有单行文本时可通过设置行高与父元素高度相同来使文本居中。
        PSS:在通过font设置字体样式时，可通过 字体大小/行高 简写。(font[默认值]会覆盖上方单独设置的行高)
        <hr>
        四个人走到这里，前边一片密林，又没有路了。
        “悟空，我饿了，找些吃的来。”唐僧往石头上大模大样一坐，说道。
        “我正忙着，你不会自己去找？……又不是没有腿。”孙悟空拄着棒子说。
    </div>
    <div>
        “你忙？忙什么？”
        “你不觉得这晚霞很美吗？”孙悟空说，眼睛还望着天边，“我只有看看这个，才能每天坚持向西走下去啊。”
        “你可以一边看一边找啊，只要不撞到大树上就行。”
        “我看晚霞的时候不做任何事！”

    </div>
    <div>
        “孙悟空你不能这样，不能这样欺负秃头，你把他饿死了，我们就找不到西天，找不到西天，我们身上的诅咒永远也解除不了。”猪八戒说。
        “呸！什么时候轮到你这个猪头说话了！”
    </div>
    <div>
        “你说什么？你说谁是猪？！”
        “不是猪，是猪头！哼哼哼……”孙悟空咬着牙冷笑。
        “你敢再说一遍！”猪八戒举着钉耙就要往上冲。
        “吵什么吵什么！老子要困觉了！要打滚远些打！”沙和尚大吼。
        三个恶棍怒目而视。
    </div>
</body>

</html>